<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>标记提醒完成</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <style>
        body { background: #f5f5f5; }
        .container { max-width: 600px; padding: 15px; }
        .reminder-card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .action-buttons { margin: 20px 0; }
        .action-buttons .btn { margin-bottom: 10px; width: 100%; }
    </style>
</head>
<body>
    <div class="container">
        <div class="reminder-card">
            <h4>{$reminder.title}</h4>
            {if $reminder.description}
                <p class="text-muted">{$reminder.description}</p>
            {/if}
            <p class="text-info">提醒时间：{$reminder.due_date}</p>
            {if $reminder.notes}
                <p class="text-secondary">备注：{$reminder.notes}</p>
            {/if}
        </div>

        <div class="alert alert-warning">
            <h5>确认标记完成？</h5>
            <p>
                {if $reminder.is_recurring}
                    这是一个循环提醒，标记完成后将自动设置下次提醒时间。
                {else}
                    标记完成后，此提醒将被归档。
                {/if}
            </p>
        </div>

        <div class="action-buttons">
            <button type="button" class="btn btn-success" onclick="completeReminder()">确认标记完成</button>
            <a href="/reminder/note_page?reminder_id={$reminder.id}&key={$operation_key}" class="btn btn-secondary">返回详情页</a>
        </div>
    </div>

    <script src="/static/js/bootstrap.bundle.min.js"></script>
    <script>
        function completeReminder() {
            fetch('/reminder/complete?reminder_id={$reminder.id}&key={$operation_key}', {
                method: 'POST'
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 200) {
                    alert('提醒已标记为完成');
                    window.close();
                } else {
                    alert(data.message || '操作失败');
                }
            });
        }
    </script>
</body>
</html> 